<template>
  <view>
    <lf-header class="lf-header"></lf-header>
    <view class="articleBox">
      <view v-for="item in htmlList">
        <view v-if="item.type === 'html'" class="" v-html="item.value" />
        <p v-if="item.type === 'web-view'" class="video-container">
          <web-view class="video-container" :src="item.value"></web-view>
        </p>
      </view>
    </view>
  </view>
</template>
<script>
import LfHeader from '../../components/header.vue';
import {
  getBlog
} from '../../utils/http';
export default {
  components: {
    LfHeader,
  },
  data () {
    return {
      blogId: '',
      html: '',
      htmlList: [],
    }
  },
  created () {
    this.blogId = this.$route?.query.blogId || 71
    this.getContent()
  },
  methods: {
    async getContent () {
      const {
        data
      } = await getBlog(this.blogId)
      this.html = data.content.replace(/<video([^>]*)>/g,
        '<video\$1 class="video" controlslist="nodownload noplaybackrate" disablePictureInPicture="true" playsinline="true" webkit-playsinline="true" >'
      );
      // 使用正则去分隔为数组进行遍历展示
      const regex = /(<iframe.*?<\/iframe>)/g;
      const parts = this.html.split(regex);
      this.htmlList = parts.map(part => {
        if (part.startsWith("<iframe")) {
          const srcMatch = part.match(/src=['"](.*?)['"]/);
          const src = srcMatch ? srcMatch[1] : null;

          return {
            type: "web-view",
            value: src
          };
        } else {
          return {
            type: "html",
            value: part
          };
        }
      });
      console.log(this.html, this.htmlList, 'this.test');
    },
  }
}
</script>
<style lang="scss" scoped>
.lf-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}
.articleBox {
  flex: 1;
  overflow: hidden;
  overflow-y: auto;
  padding: 45px 15px 150px 15px;
}

::v-deep .video {
  width: 100% !important;
  background-color: #000;
  margin: 10px 0;
}

::v-deep img {
  max-width: 100%;
}

::v-deep .video-container {
  display: flex;
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.24%; /* 16:9 宽高比的百分比值 */
  // margin: 10px 0;
  border: none;
}

::v-deep .video-container iframe {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  height: 56%;
}

::v-deep iframe {
}

::v-deep p {
  margin-top: 10px;
}

::v-deep img {
  margin-top: 10px;
}
</style>